<template>
    <div class="verificationCode-model">
        <div class="verificationCode-container">
            <div class="title">请完成下列验证后继续:</div>
            <img class="close" src="./../../assets/image/login/close.png" @click="closeDialog" alt="close" width="16" height="16"/>
            <div class="code-container">
                <div @click="refreshImage">
                    <img v-if="imgData&&true" :src="imgData" alt="点击刷新" style="width: 100%;height: 100%;">
                </div>
            </div>
            <div class="text-container">
                <div class="tip-code">看不清点击图片刷新</div>
                <a-input placeholder="请输入验证码" type="number" v-model="verification"/>
                <div class="options-btn" @click="confirmDialog">确认</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'verificationCode',
        data() {
            return {
                imgData: '',
                imgKey: '',
                verification: '',
                isRefresh: false,
            }
        },
        props: {
            dialogVisible: Boolean
        },
        model: {
            prop: 'dialogVisible',
            event: 'changeDialog'
        },
        created() {
            this.getCaptcha();
        },
        methods: {
            // 刷新验证码
            refreshImage() {
                if (this.isRefresh) return;
                this.isRefresh = true;
                let timer = setTimeout(() => {
                    this.isRefresh = false;
                    clearTimeout(timer);
                }, 1000);
                this.getCaptcha();
            },
            // 获取验证码接口
            getCaptcha() {
                this.$store.dispatch('request', this.$api.login.captcha({})).then(data => {
                    if (data.result) {
                        this.imgData = 'data:image/png;base64,' + data.result.img;
                        this.imgKey = data.result.key;
                    }
                })
            },
            closeDialog(){
                this.$emit('changeDialog', false);
            },
            confirmDialog(){
                if (!this.verification) {
                    this.$message.error('请先填写验证码');
                    return;
                }
                this.$emit('confirmDialog', {imgKey:this.imgKey,verification:this.verification});
                this.$emit('changeDialog', false);
            }
        }
    }
</script>

<style lang="less" scoped>
    .verificationCode-model{
        position: fixed;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background-color: rgba(0,0,0,.4);
    }
    .verificationCode-container{
        width: 400px;
        height: 358px;
        background: #ffffff;
        border-radius: 10px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        padding: 20px 16px;
        .title{
            font-size: 16px;
            font-weight: 400;
            color: #333333;
            line-height: 22px;
        }
        img.close{
            position: absolute;
            top:20px;
            right: 16px;
            cursor: pointer;
        }
        .text-container{
            text-align: center;
            width: 298px;
            margin: 0 auto;
        }
        /deep/ .ant-input {
            width: 100%;
            height: 40px;
            border-radius: 4px;
            border: none;
            background: @greyBackground;
            color: @colorCommonFont;
            font-size: 14px;
            padding-left: 20px;
            padding-right: 20px;
            text-align: center;
            margin-top: 16px;
            margin-bottom: 20px;
            &:focus {
                box-shadow: none;
            }
        }
        .options-btn {
            width: 100%;
            height: 44px;
            background: @activeRed;
            border-radius: 4px;
            font-size: 14px;
            line-height: 44px;
            text-align: center;
            color: #fff;
            .userUnSelect();
            cursor: pointer;
        }
    }
    .code-container{
        width: 242px;
        height: 89px;
        margin: 0 auto;
        margin-top: 33px;
        margin-bottom: 12px;
        cursor: pointer;
    }
    .tip-code{
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: center;
        color: #666;
        line-height: 22px;
    }
</style>
